<template>
	<view class="wp_-flex-col page">
		<!-- 顶部搜索和店铺信息 -->
		<view class="wp_-flex-col header">
			<!-- 搜索框 -->
			<view class="wp_-flex-row search-wrapper" @tap="goToSearch">
				<view class="wp_-flex-row wp_-items-center wp_-flex-1 search-input">
					<image class="search-icon" src="/static/menu/117dfdcfc62a8651f86aa56c1db6c74a.png" />
					<text class="search-placeholder">请输入商品名称</text>
				</view>
			</view>
			
			<!-- 店铺信息 -->
			<view class="wp_-flex-row wp_-justify-between store-info">
				<view class="wp_-flex-col wp_-self-center" @tap="goToStoreDetail">
					<view class="wp_-flex-row wp_-items-center">
						<text class="store-name">玖盛谷2号桌</text>
					</view>
					<view class="wp_-mt-16 wp_-flex-row wp_-items-center">
						<image class="distance-icon" src="/static/menu/82a617e96551e74fc96528efc85baa41.png" />
						<text class="distance-text">距离您300m</text>
						
					</view>

				</view>
				<!-- 堂食/外卖切换 -->
				<view class="dining-type">
					<view 
						class="dining-type-item" 
						:class="{'dining-type-active': diningType === 'dine-in'}"
						@click="switchDiningType('dine-in')"
					>
						<text>餐饮</text>
					</view>
					<view 
						class="dining-type-item"
						:class="{'dining-type-active': diningType === 'takeout'}"
						@click="switchDiningType('takeout')"
					>
						<text>水吧</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 商品列表区域 -->
		<view class="menu-content">
			<!-- 左侧分类菜单 -->
			<scroll-view scroll-y class="menu-sidebar">
				<view 
					v-for="(category, index) in categories" 
					:key="index"
					:class="['sidebar-item', currentCategory === index ? 'active' : '']"
					@click="switchCategory(index)"
				>
					<text>{{category.name}}</text>
				</view>
			</scroll-view>
			
			<!-- 右侧商品列表 -->
			<scroll-view scroll-y class="product-list-container">
				<!-- 分类标题 -->
				<text class="category-title">{{categories[currentCategory].name}}</text>
				
				<!-- 商品列 -->
				<view class="product-list">
					<view class="product-item" v-for="(item, index) in currentProducts" :key="index">
						<image class="product-image" :src="item.image" />
						<view class="product-info">
							<text class="product-name">{{item.name}}</text>
							<text class="product-spec">规格：{{item.spec}}</text>
							<view class="product-bottom">
								<view class="price">
									<text class="price-symbol">¥</text>
									<text class="price-value">{{item.price}}</text>
								</view>
								<view class="select-btn" @click="selectSpec(item)">
									<text>选规格</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 规格选择弹窗 -->
		<menu-open 
			v-if="showSpecSelector" 
			:product="selectedProduct"
			@close="closeSpecSelector"
			@add-to-cart="handleAddToCart"
		></menu-open>

		<!-- 底部购物车栏 -->
		<view class="cart-bar" v-if="cartTotal > 0">
			<view class="wp_-flex-row wp_-items-center cart-content">
				<view class="cart-left" @tap="openCart">
					<image class="cart-icon" src="/static/menu/cart.png" />
					<view class="cart-badge">{{cartTotal}}</view>
				</view>
				<view class="wp_-flex-1 cart-center">
					<text class="price-symbol">¥</text>
					<text class="price-value">{{cartPrice}}</text>
				</view>
				<view class="checkout-btn" @tap="goToCheckout">
					<text class="btn-text">去结算</text>
				</view>
			</view>
		</view>
		<!-- 购物车弹窗 -->
		<shopping-cart 
			v-if="showCart"
			:cart-list="cartList"
			:total-price="cartPrice"
			@close="closeCart"
			@update="updateCart"
		/>
	</view>
</template>

<script>
import MenuOpen from '../menu/menu_open.vue'
import ShoppingCart from './ShoppingCart.vue'

export default {
	components: {
		MenuOpen,
		ShoppingCart
	},
	data() {
		return {
			showSpecSelector: false, // 控制规格选择器显示
			selectedProduct: null, // 当前选中的商品
			productList: [
				{
					name: '暴打凤梨鸭屎香柠檬茶',
					spec: '600ml',
					price: 18,
					image: '/static/menu/595f1342438e860b2989fb7a6b4614bc.png'
				},
				{
					name: '招牌暴打渣男柠檬茶',
					spec: '600ml',
					price: 18,
					image: '/static/menu/ade3ff4d605f82d824aedfaef156d804.png'
				},
				{
					name: '芒果柠檬茶',
					spec: '600ml',
					price: 15,
					image: '/static/menu/51a6a8b5890fe982ce6e69b5bcc9499e.png'
				}
			],
			storeInfo: {
				name: 'KKmall京基店2楼188号',
				distance: '300m'
			},
			currentCategory: 0, // 当前选中的分类
			categories: [
				{ 
					name: '新品上市',
					products: [
						{
							name: '暴打凤梨鸭屎香柠檬茶',
							spec: '600ml',
							price: 18,
							image: '/static/menu/595f1342438e860b2989fb7a6b4614bc.png'
						},
						{
							name: '招牌暴打渣男柠檬茶',
							spec: '600ml',
							price: 18,
							image: '/static/menu/ade3ff4d605f82d824aedfaef156d804.png'
						}
					]
				},
				{ 
					name: '人气推荐',
					products: [
						{
							name: '芒果柠檬茶',
							spec: '600ml',
							price: 15,
							image: '/static/menu/51a6a8b5890fe982ce6e69b5bcc9499e.png'
						}
					]
				},
				{ 
					name: '柠檬茶',
					products: [
						{
							name: '鸭屎香柠檬茶',
							spec: '600ml',
							price: 16,
							image: '/static/menu/595f1342438e860b2989fb7a6b4614bc.png'
						}
					]
				},
				{ 
					name: '奶茶系列',
					products: [
						{
							name: '招牌奶茶',
							spec: '500ml',
							price: 14,
							image: '/static/menu/ade3ff4d605f82d824aedfaef156d804.png'
						}
					]
				},
				{ 
					name: '果茶系列',
					products: [
						{
							name: '芒果果茶',
							spec: '500ml',
							price: 15,
							image: '/static/menu/51a6a8b5890fe982ce6e69b5bcc9499e.png'
						}
					]
				},
				{ 
					name: '小吃系列',
					products: [
						{
							name: '薯条',
							spec: '1份',
							price: 12,
							image: '/static/menu/595f1342438e860b2989fb7a6b4614bc.png'
						}
					]
				}
			],
			diningType: 'dine-in', // 用餐方式：dine-in(堂食) / takeout(外卖)
			cartTotal: 0, // 购物车商品总数
			cartPrice: 0, // 购物车总价
			cartList: [], // 购物车商品列表
			showCart: false // 控制物弹窗显示
		}
	},
	computed: {
		// 当前分类的商品列表
		currentProducts() {
			return this.categories[this.currentCategory]?.products || []
		}
	},
	methods: {
		// 搜索商
		onSearch(keyword) {
			console.log('搜索:', keyword)
		},
		// 切换堂食/外卖
		switchDiningType(type) {
			this.diningType = type
		},
		// 选择商品规格
		selectSpec(product) {
			this.selectedProduct = product
			this.showSpecSelector = true
		},
		// 关闭规格择器
		closeSpecSelector() {
			this.showSpecSelector = false
			this.selectedProduct = null
		},
		// 切换分类
		switchCategory(index) {
			this.currentCategory = index
		},
		// 打开购物车
		openCart() {
			this.showCart = true
		},
		
		// 关闭购物车
		closeCart() {
			this.showCart = false
		},
		
		// 更新购物车
		updateCart(data) {
			this.cartList = data.list
			this.cartTotal = data.total
			this.cartPrice = data.price
			// 同步到本地存储
			uni.setStorageSync('cartData', data)
		},
		
		// 添加到购物车
		addToCart(product, spec) {
			// 添加商品到购物车
			const item = {
				...product,
				spec,
				count: 1
			}
			this.cartList.push(item)
			this.cartTotal++
			this.cartPrice += Number(product.price)
		},
		
		// 去结算
		goToCheckout() {
			if (this.cartTotal > 0) {
				// 保存购车数据
				uni.setStorageSync('cartData', {
					list: this.cartList,
					total: this.cartTotal,
					price: this.cartPrice
				})
				
				// 跳转到订单提交页面
				uni.navigateTo({
					url: '/pages/order/orderSubmit'
				})
			}
		},
		
		// 处理添加购物车
		handleAddToCart(item) {
			// 检查购物车是否已有相同商品（包括规格）
			const existingItem = this.cartList.find(cartItem => 
				cartItem.name === item.name && 
				cartItem.temp === item.temp && 
				cartItem.sugar === item.sugar
			)
			
			if (existingItem) {
				// 如果已存在相同规格的商品，增加数量
				existingItem.count += item.count
				existingItem.totalPrice = existingItem.price * existingItem.count
			} else {
				// 如果不存在，添加新商品
				this.cartList.push(item)
			}
			
			// 计算总数和总价
			const total = this.cartList.reduce((sum, item) => sum + item.count, 0)
			const price = this.cartList.reduce((sum, item) => sum + item.totalPrice, 0)
			
			// 更新购物车数据
			const newCartData = {
				list: this.cartList,
				total,
				price
			}
			
			// 更新本地存储
			uni.setStorageSync('cartData', newCartData)
			
			// 更新页面数据
			this.cartTotal = total
			this.cartPrice = price
			
			// 显示添加成功提示
			uni.showToast({
				title: '已加入购物车',
				icon: 'success'
			})
		},
		
		// 跳转到搜索页面
		goToSearch() {
			uni.navigateTo({
				url: '/pages/search/search',
				animationType: 'slide-in-right',
				animationDuration: 300
			})
		},
		
		// 加载购物车数据
		loadCartData() {
			const cartData = uni.getStorageSync('cartData')
			if (cartData) {
				this.cartList = cartData.list || []
				this.cartTotal = cartData.total || 0
				this.cartPrice = cartData.price || 0
			}
		},
		
		// 添加跳转到店铺详情的方法
		goToStoreDetail() {
			uni.navigateTo({
				url: '/pages/store/detail',
				animationType: 'slide-in-right',
				animationDuration: 300
			})
		}
	},
	onShow() {
		// 检���是否有外卖选择状态
		const savedDiningType = uni.getStorageSync('diningType')
		if (savedDiningType) {
			this.diningType = savedDiningType
			// 清除保存的状态
			uni.removeStorageSync('diningType')
		}

		// 加载购物车数据
		this.loadCartData()
	}
}
</script>

<style scoped lang="scss">
	.wp_-flex-row {
	  display: flex;
	  flex-direction: row;
	}
	
	.wp_-flex-col {
	  display: flex;
	  flex-direction: column;
	}
	
	.wp_-justify-start {
	  justify-content: flex-start;
	}
	
	.wp_-justify-end {
	  justify-content: flex-end;
	}
	
	.wp_-justify-center {
	  justify-content: center;
	}
	
	.wp_-justify-between {
	  justify-content: space-between;
	}
	
	.wp_-justify-around {
	  justify-content: space-around;
	}
	
	.wp_-justify-evenly {
	  justify-content: space-evenly;
	}
	
	.wp_-items-start {
	  align-items: flex-start;
	}
	
	.wp_-items-end {
	  align-items: flex-end;
	}
	
	.wp_-items-center {
	  align-items: center;
	}
	
	.wp_-items-baseline {
	  align-items: baseline;
	}
	
	.wp_-items-stretch {
	  align-items: stretch;
	}
	
	.wp_-self-start {
	  align-self: flex-start;
	}
	
	.wp_-self-end {
	  align-self: flex-end;
	}
	
	.wp_-self-center {
	  align-self: center;
	}
	
	.wp_-self-baseline {
	  align-self: baseline;
	}
	
	.wp_-self-stretch {
	  align-self: stretch;
	}
	
	.wp_-flex-1 {
	  flex: 1 1 0%;
	}
	
	.wp_-flex-auto {
	  flex: 1 1 auto;
	}
	
	.wp_-grow {
	  flex-grow: 1;
	}
	
	.wp_-grow-0 {
	  flex-grow: 0;
	}
	
	.wp_-shrink {
	  flex-shrink: 1;
	}
	
	.wp_-shrink-0 {
	  flex-shrink: 0;
	}
	
	.wp_-relative {
	  position: relative;
	}
.page {
	position: relative;
	z-index: 1;
	background-color: #f8fafb;
	width: 100%;
	height: 100%;
	overflow-y: auto;
	overflow: hidden;
	max-height: 100vh;
	
	// 顶部区域
	.header {
		padding-top: 180rpx;
		background-image: url('/static/menu/a704b1fd76a14df640e66c4ad009de43.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		
		// 搜索框
		.search-wrapper {
			padding: 20rpx 30rpx;
			
			.search-input {
				padding: 16rpx 24rpx;
				background-color: #ffffff;
				border-radius: 308rpx;
				height: 72rpx;
				
				.search-icon {
					width: 28rpx;
					height: 28rpx;
				}
				
				.search-placeholder {
					margin-left: 16rpx;
					color: #cccccc;
					font-size: 28rpx;
				}
			}
		}
		
		// 店铺信息
		.store-info {
			padding: 56rpx 40rpx 38rpx;
			
			.store-name {
				font-size: 30rpx;
				color: #333;
				font-weight: bold;
				position: relative;
				padding-right: 40rpx;
				
				&::after {
					content: '';
					position: absolute;
					right: 12rpx;
					top: 50%;
					transform: translateY(-50%);
					width: 12rpx;
					height: 12rpx;
					border-top: 2rpx solid #999;
					border-right: 2rpx solid #999;
					transform: rotate(45deg);
				}
			}
			
			.distance-icon {
				width: 36rpx;
				height: 40rpx;
			}
			
			.distance-text {
				margin-left: 14rpx;
				font-size: 26rpx;
				color: #b3b3b3;
			}
			
			&:active {
				opacity: 0.8;
			}
		}
		
		// 堂食/外卖切换
		.dining-type {
			display: flex;
			align-items: center;
			background-color: #f6f6f6;
			border-radius: 308rpx;
			width: 186rpx;
			height: 56rpx;
			
			&-item {
				flex: 1;
				text-align: center;
				font-size: 24rpx;
				color: #b3b3b3;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				transition: all 0.3s;
				
				&.dining-type-active {
					background-color: #8cd548;
					border-radius: 308rpx;
					color: #ffffff;
				}
				
				text {
					color: inherit;
				}
			}
		}
	}
	
	// 商品列表区域
	.menu-content {
		display: flex;
		height: calc(100vh - 300rpx);
		padding-bottom: 128rpx;
		
		// 左侧分类菜单
		.menu-sidebar {
			width: 160rpx;
			height: 100%;
			background-color: #f6f6f6;
			
			.sidebar-item {
				padding: 30rpx 20rpx;
				text-align: center;
				font-size: 26rpx;
				color: #666;
				position: relative;
				
				&.active {
					background-color: #fff;
					color: #8cd548;
					font-weight: bold;
					
					&::before {
						content: '';
						position: absolute;
						left: 0;
						top: 50%;
						transform: translateY(-50%);
						width: 6rpx;
						height: 36rpx;
						background-color: #8cd548;
					}
				}
			}
		}
		
		// 右侧商品列表
		.product-list-container {
			flex: 1;
			height: 100%;
			padding: 0 30rpx;
			background-color: #fff;
			
			// 分类标题
			.category-title {
				font-size: 26rpx;
				color: #3b3b3b;
			}
			
			.product-list {
				.product-item {
					display: flex;
					margin-top: 30rpx;
					
					.product-image {
						width: 148rpx;
						height: 160rpx;
						border-radius: 16rpx;
						background-color: #f1f6f3;
					}
					
					.product-info {
						flex: 1;
						margin-left: 24rpx;
						
						.product-name {
							font-size: 30rpx;
							color: #3b3b3b;
						}
						
						.product-spec {
							margin-top: 14rpx;
							font-size: 20rpx;
							color: #b3b3b3;
						}
						
						.product-bottom {
							margin-top: 14rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;
							
							.price {
								display: flex;
								align-items: baseline;
								
								&-symbol {
									font-size: 24rpx;
								}
								
								&-value {
									font-size: 40rpx;
									margin-left: 6rpx;
								}
							}
							
							.select-btn {
								padding: 12rpx 0;
								background-color: #8cd548;
								border-radius: 308rpx;
								width: 120rpx;
								text-align: center;
								
								text {
									font-size: 24rpx;
									color: #ffffff;
								}
							}
						}
					}
				}
			}
		}
	}

	// 底部购物车栏
	.cart-bar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #fff;
		padding: 20rpx 40rpx;
		box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.05);
		z-index: 100;
		
		.cart-content {
			height: 88rpx;
			
			.cart-left {
				position: relative;
				padding: 10rpx;
				
				.cart-icon {
					width: 64rpx;
					height: 64rpx;
				}
				
				.cart-badge {
					position: absolute;
					top: 0;
					right: 0;
					min-width: 32rpx;
					height: 32rpx;
					padding: 0 8rpx;
					background-color: #8cd548;
					border-radius: 16rpx;
					color: #fff;
					font-size: 24rpx;
					line-height: 32rpx;
					text-align: center;
				}
			}
			
			.cart-center {
				margin-left: 20rpx;
				
				.empty-text {
					font-size: 28rpx;
					color: #999;
				}
				
				.price-symbol {
					font-size: 24rpx;
					color: #8cd548;
				}
				
				.price-value {
					font-size: 36rpx;
					color: #8cd548;
					font-weight: bold;
					margin-left: 4rpx;
				}
			}
			
			.checkout-btn {
				padding: 0 40rpx;
				height: 88rpx;
				background-color: #8cd548;
				border-radius: 44rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				
				&.disabled {
					background-color: #ccc;
					pointer-events: none; // 禁用点击
				}
				
				.btn-text {
					font-size: 32rpx;
					color: #fff;
					font-weight: 500;
				}
			}
		}
	}
}
</style>